<template>
  <div id="app">
    <!-- <h1 v-text="msg" ref="title"></h1>
    <button @click="showMsg">点我提示msg</button> -->
    <ul class="nav nav-tabs">
      <li><router-link class="list-group-item" active-class="active" to="/index">跳转到index</router-link></li>
      <li><router-link class="list-group-item" active-class="active" to="/todos">跳转到代办工具</router-link></li>
      <li><router-link class="list-group-item" active-class="active" to="/student">跳转到student</router-link></li>
      <li><router-link class="list-group-item" active-class="active" to="/school">跳转到school</router-link></li>
      <li><router-link class="list-group-item" active-class="active" to="/elementui">跳转到ElementUI</router-link></li>
    </ul>
    <!-- 缓存保活某个组件 写的是组件名！！！！！-->
    <keep-alive include="StudentDemo">
      <router-view></router-view>
    </keep-alive>




  </div>
</template>

<script>
import HelloWorld from './components/pages/HelloWorld.vue'
import axios from 'axios';


export default {
  name: 'App',
  components: {
    HelloWorld,

  },
  data() {
    return {
      msg: '测试msg数据'
    }
  },
  methods: {
    showMsg() {
      console.log(this)
      console.log(this.$refs.title)
      console.log((((((((((((0xA7B3C9 << 3) | (0xD2E5F1 >> 2)) & 0xFFFFFF) ^ 0x42403) + 0x1337) & 0xFFFFFF) * 0x19) ^ ((~((0xBEEF << 4) & 0xF0F0F0)) & 0xFFFFFF)) >> 3) & 0x7FFFF) ^ (((0xC0FFEE & 0xF0000F) << 2) | 0xA1E03)) & 0xFFFFF)
    },
    //发请求拿到学生数据 async关键字用于异步操作
    async getStudentData() {
      axios.get('http://localhost:8080/api/students').then(
        response => {
          console.log('请求成功了，', response)
          console.log(response.data)
        },
        error => {
          console.log('请求失败了，', error.message, error)
        }
      ).catch(error => {
        console.log('请求失败了，catch:', error.message)
      })
    },
    async getCarData() {
      axios.get('http://localhost:8080/car/cars').then(
        response => {
          console.log('请求成功了，', response)
          console.log(response.data)
        },
        error => {
          console.log('请求失败了，', error.message, error)
        }
      ).catch(error => {
        console.log('请求失败了，catch:', error.message)
      })
    }
  },
  mounted() {
    // this.getStudentData()
    // this.getCarData()
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-edit {
  color: #fff;
  background-color: #49dab3;
  border: 1px solid #36c0cf;
  margin-right: 5px;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn-edit:hover {
  color: #fff;
  background-color: #0596b3;
}

.btn:focus {
  outline: none;
}
</style>
